<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection" />
	<meta content="emai=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="/css/common.css" />
	<title>芝士妈妈线下沙龙</title>
	<style>
		html {
			background-color: #f8d7e5;
		}

		.wrapper {
			position: relative;
			max-width: 768px;
			margin: 0 auto;
		}

			.wrapper img {
				display: block;
				width: 100%;
			}

				.wrapper img.arrow {
					position: absolute;
					width: 10%;
					left: 68.8%;
					top: 75%;
					-moz-animation: moving 1s linear infinite;
					-o-animation: moving 1s linear infinite;
					-webkit-animation: moving 1s linear infinite;
					animation: moving 1s linear infinite;
				}

			.wrapper a {
				display: block;
				bottom: 17.5%;
				position: absolute;
				width: 48.6%;
				left: 25.7%;
			}

				.wrapper a img:last-child, .wrapper a.active img:first-child {
					display: none;
				}

				.wrapper a img:first-child, .wrapper a.active img:last-child {
					display: block;
				}

		.map {
			display: block;
			width: 80%;
			height: 9vh;
			position: absolute;
			bottom: 7%;
			left: 10%;
		}

		.popup-wrapper {
			display: block;
		}

			.popup-wrapper .popup-bg {
				background-color: rgba(0,0,0,0.60);
			}

		.popup-layout {
			background-color: transparent;
			top: 0;
			left: 0;
			padding: 0;
			width: auto;
		}

		.popup-map {
			display: none;
		}

			.popup-map img {
				height: 80vh;
			}

		.popup-wrapper .popup-map {
			display: block;
		}
	</style>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?19f39b206aedf768b42fbc69e4e4f721";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
</head>
<body>
	<div class="wrapper">
		<img src="/img/offline-bg.png" />
		<a>
			<img src="/img/btn_enroll.png" />
			<img src="/img/btn_enroll_c.png" />
		</a>
		<span class="map"></span>
	</div>
	<div class="popup-map">
		<img src="/img/offline-map.png" />
	</div>
	<script src="/js/zepto-1.1.6.js"></script>
	<script>
		window.zsmm = {};
		Zepto(function ($) {
			$("a").on('touchstart', function (e) {
				e.preventDefault();
				$(this).addClass("active");
			}).on('touchend', function (e) {
				e.preventDefault();
				window.location.href = "http://249054.weixin.drip.im/form/detail/dea962b8-09f4-49d2-b7b7-472ff382e08a?special=249054";
			});
			$(".map").on('touchstart', function (e) {
				e.preventDefault();
				zsmm.Popup.New($(".popup-map"));
			});
		});

		zsmm.Popup = {
			isopen: true,
			ins: null,
			New: function (obj, close) {
				var that = this;
				if (this.isopen && this.ins) {
					that.clear();
					window.console.log("isOpen");
				}
				this.instance(obj, close);
			},
			instance: function (obj, close) {
				if (typeof (obj) == "undeifined") return false;
				var that = this;
				this.ins = $('<div class="popup-wrapper vertical"></div>');
				this.ins.appendTo('body');
				obj = '<div class="popup-map">' + obj.html() + '</div>';
				this.ins.html('<div class="popup-bg"></div><div class="popup-layout">' + obj + '</div>');
				that.init(close);
			},
			init: function (close) {
				var that = this;
				var toClose = (typeof (close) == "undefined") ? 1 : close;
				var marginTop = ($(window).height() - this.ins.find(".popup-layout").height()) / 2;
				var marginLeft = ($(window).width() - this.ins.find(".popup-layout").width()) / 2;
				this.ins.show().find(".popup-layout").css({ 'top': marginTop + 'px', 'left': marginLeft + 'px' });
				if (toClose == 0) return false;
				this.ins.find(".popup-bg").on('touchstart', function (e) {
					e.preventDefault();
					that.clear();
				});
			},
			clear: function () {
				this.ins.remove();
				this.ins = null;
			}
		};
	</script>
	<script type="text/javascript">
    Zepto(function ($) {
        wx.config({
            debug: false,
            appId: '<?php echo $js_config['appId']?>',
            timestamp: <?php echo $js_config['timestamp']?>,
            nonceStr: '<?php echo $js_config['noncestr']?>',
            signature: '<?php echo $js_config['signature']?>',
            jsApiList: [
            	'onMenuShareTimeline',
            	'onMenuShareAppMessage'
            ]
        });
        wx.ready(function () {
        	wx.onMenuShareTimeline({
            	title: '<?php echo $share_title;?>',
        	    link: '<?php echo $share_url?>', // 分享链接
        	    imgUrl: 'http://wx.zhishimama.com/img/salon_offline.png', // 分享图标
        	    success: function () {
        	        // 用户确认分享后执行的回调函数
        	    },
        	    cancel: function () {
        	        // 用户取消分享后执行的回调函数
        	    }
        	});

        	wx.onMenuShareAppMessage({
            	title: '<?php echo $share_title?>',
        	    desc: '<?php echo $share_content;?>', // 分享描述
        	    link: '<?php echo $share_url?>', // 分享链接
        	    imgUrl: 'http://wx.zhishimama.com/img/salon_offline.png', // 分享图标
        	    type: 'link', // 分享类型,music、video或link，不填默认为link
        	    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        	    success: function () {
        	        // 用户确认分享后执行的回调函数
        	    },
        	    cancel: function () {
        	        // 用户取消分享后执行的回调函数
        	    }
        	});
        });
    })
	</script>
</body>
</html>
